<template>
  <div class="container">
    <el-card>
      <!-- 输入框 -->
      <el-row type="flex" justify="space-between">
        <el-col :span="5">
          <el-form label-width="80px" ref="keyRef">
            <el-form-item label="关键字">
              <el-input
                style="width: 200px"
                v-model="keyword"
                @change="random"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 按钮 -->
        <el-row type="flex" justify="end">
          <el-col>
            <el-button @click="deleteBtn">清除</el-button>
            <el-button type="primary" @click="random">搜索</el-button>
          </el-col>
        </el-row>
      </el-row>
      <!-- 警示栏 -->
      <el-alert :title="`数据共有${page.total}条`" type="info" show-icon>
      </el-alert>
      <el-table :data="items" style="width: 100%">
        <el-table-column prop="id" label="编号" width="190"> </el-table-column>
        <el-table-column label="题型" width="80px">
          <template slot-scope="{ row }">
            {{ row.questionType | questionTypeChange }}
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="185">
          <template slot-scope="{ row }">
            <span
              v-for="(item, index) in row.questionIDs"
              :key="index"
              style="color: orange"
              @click="titleLog(item.id)"
              >{{ item.number }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="190">
          <template slot-scope="{ row }">
            {{ row.addTime | parseTimeByString("{y}-{m}-{d} {h}:{m}:{s} ") }}
          </template>
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间（s）">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率（%）">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="delBtn(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination
          background
          :page-sizes="[20, 30, 60, 100]"
          layout=" prev, pager, next, sizes, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :total="page.total"
          :current-page="page.page"
          :page-size="page.pagesize"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- //弹出框 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="70%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row type="flex" justify="start">
          <el-col :span="6">
            <el-form-item label="【题型】:" prop="questionType">
              <template>
                {{ form.questionType | questionTypeChange }}
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【编号】:" prop="id">
              {{ form.id }}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="【难度】:" prop="difficulty">
              <template>
                {{ form.difficulty | difficultySlot }}
              </template>
            </el-form-item></el-col
          >
          <el-col :span="6">
            <el-form-item label="【标签】:" prop="tags">
              {{ form.tags }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="6">
            <el-form-item label="【学科】:" prop="subjectID">
              {{ form.subjectName }}
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="【目录】:" prop="catalogID">
              {{ form.directoryName }}
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="【方向】:" prop="direction">
              {{ form.direction }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="【题干】:" prop="question"></el-form-item>
          <div class="question" v-html="form.question"></div>
          <el-col>
            <el-form-item
              v-if="form.questionType !== '3'"
              label="【题干】:"
              prop="isRight"
            >
            </el-form-item>
            <div>
              {{
                form.questionType | questionTypeChange
              }}选项:(以下选中的选项为正确答案)
            </div>
            <!-- 单选 -->
            <div v-if="form.questionType === '1'">
              <div v-for="item in optionsList" :key="item.id">
                <el-radio :value="1" :label="item.isRight">{{
                  item.title
                }}</el-radio>
              </div>
            </div>

            <!-- 多选 -->

            <el-checkbox-group
              :value="1"
              v-for="(item, index) in optionsList"
              :key="index"
            >
              <el-checkbox
                :true-label="item.isRight"
                v-if="form.questionType === '2'"
                >{{ item.title }}</el-checkbox
              >
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row class="row">
          <el-form-item
            label="【参考答案】:"
            prop="videoURL"
            label-width="120px"
          >
            <el-button type="danger" @click="video=!video"> 在线预览 </el-button>
            <video v-if="video" :src="form.videoURL" style="width: 50%;display: block;margin-top: 10px;" controls="controls">视频答案预览</video>
          </el-form-item>
        </el-row>
        <el-row class="row">
          <el-col>
            <el-form-item
              label="【答案解析】:"
              prop="answerID"
              label-width="120px"
            >
              <a href="form.remarks">
                {{ form.answerID ? form.answerID : "无" }}
              </a>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item
              label="【题目备注】:"
              prop="remarks"
              label-width="120px"
            >
              <a href="form.remarks">
                {{ form.remarks ? form.remarks : "无" }}
              </a>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" justify="center" style="margin-top: '70px'">
        <el-col :span="5">
          <el-button type="primary" @click="dialogVisible = false"
            >关闭</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  data () {
    return {
      page: {
        page: 1,
        pagesize: 20,
        total: 0
      },
      video: false,
      form: {
        questionType: '',
        id: '',
        difficulty: '',
        tags: '',
        subjectID: '',
        catalogID: '',
        direction: '',
        question: '',
        isRight: 0,
        videoURL: '',
        answerID: '',
        subjectName: '',
        directoryName: '',
        remarks: ''

      },
      keyword: '',
      items: [],
      dialogVisible: false,

      optionsList: []

    }
  },
  filters: {
    questionTypeChange (val) {
      // console.log('val', val, 'questionType', questionType)
      // 这里注意的是：转化的时候，数据类型要与枚举里面的数据类型要相同
      const f = questionType.find(t => t.value === +val)
      return f ? f.label : '未知'
    },
    difficultySlot (val) {
      const d = difficulty.find(t => t.value === +val)
      return d ? d.label : '未知'
    }
  },
  methods: {
    // 弹框
    titleLog (id) {
      this.digList(id)
      this.dialogVisible = true
    },
    async digList (id) {
      // console.log(id)
      const { data } = await detail({ id })
      console.log(data)
      this.form = data
      this.optionsList = data.options
      console.log(this.optionsList)
    },

    async random () {
      const key = this.keyword
      const { data } = await randoms({
        page: this.page.page,
        pagesize: this.page.pagesize,
        keyword: key
      })
      if (this.keyword.trim()) {
        // 搜索
        this.items = data.items
        this.page.total = data.counts
      } else {
        // 渲染
        this.items = data.items
        this.page.total = data.counts
      }
      // 这里进行了改进，不需要按enter再刷新，让他直接刷新，这里不需要搜索按钮了----------------
      // this.page.pagesize = data.pagesize

      this.random()
    },
    handleCurrentChange (val) {
      this.page.page = val
      this.random()
    },
    handleSizeChange (val) {
      this.page.pagesize = val
      this.random()
    },
    async delBtn (data) {
      // console.log(id)
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await removeRandoms(data)
        this.$message.success('删除成功')
        this.random()
      }).catch((err) => {
        console.log(err)
      })
    },
    deleteBtn () {
      this.keyword = ''
    }

  },
  created () {
    this.random()
  }

}
</script>

<style lang="scss" scoped>
$border-bottom: 1px solid red;
.row {
  border-bottom: $border-bottom;
}
// .el-form-item{
//   margin-bottom: 0!important;
// }
</style>
